<template>
	<view class="content">
		<y-header></y-header>
		<view class="swiper" v-if="swiperList.length > 0">
			<swiper :indicator-dots="true" :autoplay="true" :interval="7000" :duration="1000" :circular="true"
				indicator-color="#ccc" indicator-active-color="#000">
				<swiper-item v-for="(lbitem,lbindex) in swiperList" :key="lbindex">
					<view class="swiper-item">
						<image :src="lbitem.file_path" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="lightpoint">
			<!-- <view class="lightbox">
				<view class="lightlist" v-for="(item,index) in lightList" :key="index">
					<image :src="item" mode="widthFix"></image>
				</view>
			</view> -->
			<!-- <view class="light-container">
				<image src="/static/img/y4.png" mode="widthFix"></image>
			</view> -->
			<view class="slick-silde">
				<view class="slick-swiper">
					<view v-for="(item,index) in tagsList" :key="index"
						@click="toPage('/pages/shop/index?cid='+item.id)">
						<view class="swiper-item">
							<view class="imgbox">
								<image :src="item.file_path" mode=""></image>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 店长推荐 -->
		<view class="lightpoint recommend">
			<view class="recommend-title">
				{{$t('index.dztj')}}
			</view>
			<view class="article">
				<view class="article-item article-3">
					<view class="article-video">
						<view class="video-box">
							<iframe class="video-iframe" :src="video_1" frameborder="0"></iframe>
							<!-- <video ref="video1" :src="video_1" :controls="video1_controls"
								:show-center-play-btn='false'></video> -->
							<!-- <view class="video-play" v-show="!video1_controls">
								<image src="/static/icon/bf.png" mode="widthFix" @click="playVideo(1)"></image>
							</view> -->
						</view>
						<!-- <view class="video-info">
							<view class="video-info-top">
								<image src="/static/img/goods.jpg" mode=""></image>
								<view class="video-title">
									一名父親的真情告白 - 肩膀的重量 (有洋蔥)
								</view>
							</view>
						</view> -->
						<!-- <view class="video-footer">
							<view class="video-footer-tags">
								<text>本日热门</text>
							</view>
							<view class="video-footer-text">
								一名父親的真情告白 - 肩膀的重量 (有洋蔥)
							</view>
						</view> -->
					</view>
				</view>
				<view class="article-item article-3">
					<view class="article-video">
						<view class="video-box">
							<iframe class="video-iframe" :src="video_2" frameborder="0"></iframe>
							<!-- <video :src="video_2" :controls="video2_controls" ref="video2"
								:show-center-play-btn="false"></video>
							<view class="video-play" v-show="!video2_controls" @click="playVideo(2)">
								<image src="/static/icon/bf.png" mode="widthFix"></image>
							</view> -->
						</view>
						<!-- <view class="video-info">
							<view class="video-info-top">
								<image src="/static/img/goods.jpg" mode=""></image>
								<view class="video-title">
									一名父親的真情告白 - 肩膀的重量 (有洋蔥)
								</view>
							</view>
						</view> -->
						<!-- <view class="video-footer">
							<view class="video-footer-tags">
								<text>好评推荐</text>
							</view>
							<view class="video-footer-text">
								一名父親的真情告白 - 肩膀的重量 (有洋蔥)
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- DigiMax -->
		<view class="lightpoint hotgoods">
			<view class="hotbanner">
				<image :src="banner_1" mode="widthFix"></image>
			</view>
			<view class="hotgoodslist">
				<y-goodslist @collectGoods="collectGoods" :list="recommendgoods2"></y-goodslist>
			</view>
		</view>
		<!-- 好评热卖 -->

		<view class="lightpoint hotgoods">
			<view class="hotbanner">
				<image :src="banner_2" mode="widthFix"></image>
			</view>
			<view class="hotgoodslist">
				<y-goodslist @collectGoods="collectGoods" :list="recommendgoods"></y-goodslist>
			</view>
		</view>
		<view class="newsbox" v-show="showNews">
			<view class="newstitle">
				{{$t('index.xwgg')}}
			</view>
			<view class="newswiper" :indicator-dots="true" :interval="3000" :duration="1000">
				<view class="swiper-item">
					<view class="news-body" v-html="getContent(notice.content)">

					</view>
					<view class="new-check">
						<label @click="changeShow">
							<checkbox :checked="is_show_notice == 1" />
							<text>{{$t('index.bzxs')}}</text>
						</label>
					</view>
				</view>
			</view>
			<view class="closenews">
				<button @click="closeNew">{{text}}</button>
			</view>
		</view>
		<!-- 底部 -->
		<y-footer></y-footer>
	</view>
</template>

<script>
	import {
		home,
		getBasicConf,
		noticeTan,
		noticeRead
	} from "@/api/api.js"
	export default {
		data() {
			return {
				search: '', //导航栏搜索
				// swiperList: ['/static/img/swiper1.png', '/static/img/swiper2.png'],
				swiperList: [],
				lightList: ['/static/img/y1.png', '/static/img/y2.jpg', '/static/img/y3.jpg'],
				tagsNum: 5, //同时显示数量
				tagsList: [],
				recommendgoods2: [],
				recommendgoods: [],
				video1_controls: false,
				video2_controls: false,
				video_1: '',
				video_2: '',
				banner_1: '',
				banner_2: '',
				notice: '',
				notice_lst: [],
				is_show_notice: 0,
				text: this.$t('index.gb'),
				showNews: false
			}
		},
		onLoad() {
			let win = uni.getWindowInfo()
			if (win.windowWidth > 1000) {
				this.tagsNum = 12
			}
			this.getData()
			this.noticeTan()
			uni.onWindowResize((e) => {
				this.getTagsNum(e.size.windowWidth)
			})
		},
		methods: {
			getContent(content) {
				if (typeof(content) == 'string')
					return content.replace(/<img src="/g, '<img style="max-width:100%;width:100%;display:block;" src="')
			},
			changeShow(e) {
				this.is_show_notice = Number(!this.is_show_notice)
			},
			noticeTan() {
				noticeTan().then(res => {
					if (res.code == 0) {
						if (res.data.tan_notice.length > 0) {
							this.notice_lst = res.data.tan_notice
							this.notice = this.notice_lst[0]
							this.showNews = true;
						}
						this.changeText()
					}
				})
			},
			changeText() {
				if (this.notice_lst.length > 1) {
					this.text = this.$t('index.xyt')
				} else if (this.notice_lst.length == 1) {
					this.text = this.$t('index.gb')
				} else {
					this.showNews = false
				}
			},
			//已读
			closeNew() {
				console.log(this.is_show_notice);
				if (this.is_show_notice == 1) {
					noticeRead({
						id: this.notice.id
					}).then(res => {
						if (res.code == 0) {
							this.notice_lst.splice(0, 1)
							if (this.notice_lst.length > 0) {
								this.notice = this.notice_lst[0]
							} else {
								this.notice = ''
							}
							this.is_show_notice = 0
							this.changeText()
						}
					})
				} else {
					this.notice_lst.splice(0, 1)
					if (this.notice_lst.length > 0) {
						this.notice = this.notice_lst[0]
					} else {
						this.notice = ''
					}
					this.is_show_notice = 0
					this.changeText()
				}
			},
			getData() {
				home().then(res => {
					this.swiperList = res.data.banner
					// this.hotlist = res.data.recommendGoods
					this.tagsList = res.data.class2
					this.tagsNum = this.tagsNum > this.tagsList.length ? this.tagsList.length : this.tagsNum
					this.video_1 = res.data.conf.video_1
					this.video_2 = res.data.conf.video_2
					this.recommendgoods2 = res.data.recommendGoods2
					this.recommendgoods = res.data.recommendGoods
					this.banner_1 = res.data.conf[res.data.field_1].path
					this.banner_2 = res.data.conf[res.data.field_2].path
				})
			},
			playVideo(i) {
				if (i == 1) {
					this.$refs.video1.play()
					this.video1_controls = true
				} else {
					this.$refs.video2.play()
					this.video2_controls = true
				}

			},
			//收藏商品
			collectGoods(item, status) {
				uni.$showMsg(status ? this.$t('index.sccg') : this.$t('index.qxsc'))
				item.collected = status
			},
			getTagsNum(e) {
				if (e < 1000) {
					this.tagsNum = 5 > this.tagsList.length ? this.tagsList.length : 5
				} else {
					this.tagsNum = 12 > this.tagsList.length ? this.tagsList.length : 12
				}
			},
			closeThird() {
				this.thirdStyle = ''
			},
			getSecond(item) { // 点击二级分类
				this.thirdTitle = item.sname
				if (item.child && item.child != '') {
					this.thirdList = item.child
					this.thirdStyle = 'display:block'
				}
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.swiper {
		width: 100%;
		height: 38vw;

		swiper,
		swiper-item,
		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.newsbox {
		position: fixed;
		top: 20%;
		left: 50%;
		transform: translate(-50%);
		width: 96%;
		max-width: 500px;
		background: #fff;
		border-radius: 5px;
		box-shadow: 0 0 10px #ccc;
		padding: 15px;
		box-sizing: border-box;
		z-index: 1001;

		.newstitle {
			font-weight: bold;
			font-size: 17px;
			padding-bottom: 15px;
		}

		.newswiper {
			height: 350px;

			label {
				display: flex;
				align-items: center;
			}

			checkbox {
				transform: scale(.7);
			}
		}

		.news-body {
			height: 300px;
			overflow-y: scroll;
			margin-bottom: 10px;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		button {
			background: #ff5353;
			color: #fff;
			font-size: 14px;
		}
	}

	.lightpoint {
		display: flex;
		flex-direction: column;
		background-color: rgb(255, 255, 255);
		background-image: unset;
		background-position: center center;
		background-size: cover;
		padding: 7.5px calc((100% - 1180px) / 2);

		.lightbox {
			display: flex;

			.lightlist {
				flex: 1;

				image {
					width: 100%;
				}
			}
		}

		.light-container {
			image {
				width: 100%;
			}
		}

		.slick-silde {
			border-bottom: 1px solid #0000001a;
			overflow-x: scroll;

			&::-webkit-scrollbar {
				display: none;
				/* Chrome Safari */
			}

			.slick-swiper {
				display: flex;
				align-items: center;
			}

			.swiper-item {
				display: flex;
				flex-direction: column;
				justify-content: center;

				text {
					font-size: 16px;
					line-height: 20px;
					text-align: center;
					color: rgb(51, 51, 51);
					width: 80px;
					height: 40px;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					cursor: pointer;
					word-break: break-word;
					box-sizing: border-box;
				}
			}

			.imgbox {
				width: 80px;
				text-align: center;
			}

			image {
				max-width: 60px;
				height: 60px;
				width: 100%;
			}
		}

	}

	.lightpoint {
		.recommend-title {
			text-align: center;
			min-height: 20px;
			padding: 16px 0px 32px;
		}

		.article {
			display: flex;
			height: 470px;
			padding: 10px;
			box-sizing: border-box;

			.article-item {
				flex: 2;
				position: relative;
				overflow: hidden;
				z-index: 0;
				outline: 0;
				font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
				color: #eee;
				text-align: left;
				direction: ltr;
				font-size: 11px;
				line-height: 1.3;
				margin-bottom: 1px;
				background-color: #fff;
				box-shadow: #0000001a 0px 1px 2px;

				.video-box {
					position: relative;

					.video-play {

						image {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							z-index: 99;
							width: 50px;
							cursor: pointer;
						}
					}
				}


				.video-iframe {
					width: 100%;
					height: 220px;

				}

				.video-info {
					position: absolute;
					left: 12px;
					top: 12px;
					z-index: 58;
					width: calc(100% - 24px);

					.video-info-top {
						display: flex;
						align-items: center;
						font-size: 18px;

						image {
							width: 40px;
							height: 40px;
							margin-right: 5px;
							border-radius: 50%;
						}

						.video-title {
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							width: calc(100% - 52px);
						}
					}
				}

				.video-footer {
					display: flex;
					flex-direction: column;
					padding: 20px;
					background: #ffffff;

					.video-footer-tags {
						margin-bottom: 5px;

						text {
							display: inline-block;
							padding: 0px 5px;
							font-size: 12px;
							font-weight: 500;
							line-height: 20px;
							max-height: 20px;
							color: #ff5353;
							background-color: #fff2f2;
						}
					}

					.video-footer-text {
						font-weight: 500;
						margin-bottom: 5px;
						color: #4b4b4b;
						font-size: 16px;
						line-height: 20px;
						display: -webkit-box;
						overflow: hidden;
						max-height: 60px;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}
			}

			.article-3 {
				flex: 4;
				padding-right: 15px;
				box-sizing: border-box;

				.video-iframe {
					height: 450px;
				}

				&:hover {
					.video-footer {
						height: 80px;
						opacity: 1;
					}
				}

				.video-footer {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 0;
					overflow: hidden;
					opacity: 0;
					display: flex;
					flex-direction: column;
					padding: 12px 20px;
					box-sizing: border-box;
					background: #ffffff80;
					z-index: 9;
					transition: .3s;

					.video-footer-tags {
						margin-bottom: 10px;
					}

					.video-footer-text {
						-webkit-line-clamp: 1;
						font-size: 18px;
						color: #333;
					}
				}
			}

		}
	}

	.hotgoods {
		.recommend-title {
			font-size: 20px;
		}

		.hotbanner {
			padding: 0 5px;
			box-sizing: border-box;

			image {
				width: 100%;
			}
		}
	}

	@media (max-width:1000px) {
		.top_message {
			display: none;
		}

		.lightpoint {

			.article {
				flex-direction: column;
				height: auto;

				.article-item {
					width: 100%;
					height: 100%;

					.video-footer {
						padding: 12px;
					}

					.video-iframe {
						height: 55vw;
					}
				}

				.article-3 {
					height: 100%;
					flex: unset;
					padding-right: 0;
					margin-bottom: 10px;

					.video-footer {
						position: relative;
						height: 80px;
						opacity: 1;
					}
				}
			}
		}


	}
</style>